

<!-- 
  组件 的创建 语法糖

  1. 全局
  2. 局部
-->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <!-- 使用 全局组件 -->
    <cpn1>全局组件</cpn1>

    <hr>
     <!-- 使用 局部组件 -->
    <cpn2>局部组件</cpn2>

  </div>

  <script src="../../js/vue.js"></script>
  <script>
    // 组件构造器(不需要写了，也就是 extend 很少见的原因)
    // //const cpn1 = Vue.extend('这里面的内容直接放大 Vue.compont里面了')

   //注册组件 - 全局 (这个也可以不写，放到 root下)
    Vue.component('cpn1', { //全局
      template: `
        <div>
          <h2>1.我是组件 cpn1</h2>
          <p>我是内容</p>
        </div>
      `
    })


    
    // root 组件
    const app = new Vue({
      el: '#app',
      components: { //局部
        cpn2: {
          template: `
            <div>
              <h2>1.我是组件 cpn1</h2>
              <p>我是内容</p>
            </div>
          `}
      }
    })
  </script>
</body>
</html>